<template>
	<!-- 打卡日历页面 -->
	<view class='all'>
		<view class="bar">
			<!-- 上一个月 -->
			<view class="previous" @click="handleCalendar(0)">
				<icon class='iconfont icon-left'></icon>
				<!-- <button class="barbtn" v-if="langType=='ch'">上一月</button>
				<button class="barbtn" v-else>Last</button> -->
			</view>
			<!-- 显示年月 -->
			<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
			<!-- 下一个月 -->
			<view class="next" @click="handleCalendar(1)">
				<icon class='iconfont icon-you'></icon>
				<!-- <button class="barbtn" v-if="langType=='ch'">下一月</button>
				<button class="barbtn" v-else>Next</button> -->
			</view>
		</view>
		<!-- 显示星期 -->
		<view class="week" v-if="langType=='ch'">
			<view v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
		</view>
		<view class="week" v-else>
			<view v-for="(item,index) in weeks_en" :key="index">{{item}}</view>
		</view>
		<view  class="myDateTable">
			<view v-for="(item,j) in days" :key="j" class='dateCell'>
				<view v-if="item.date==undefined||item.date == null" class='cell'>
					<text :decode="true">&nbsp;&nbsp;</text>
				</view>
				<view v-else>
					<!-- 已签到日期 -->
					<view v-if="item.isSign == true" class='cell pinkColor'>
						<view>{{item.date}}</view>
						<!-- <view>已签到</view> -->
						 <view class='bgPink'></view>
					</view>
					<!-- 漏签 -->
					<view @click="clickSignUp(item.date,0)" class="cell blueColor" v-else-if="cur_year<toYear||(cur_year==toYear&&cur_month<toMonth)||(cur_year==toYear&&cur_month==toMonth&&item.date<today)">
						<view>{{item.date}}</view>
						<!-- <view class="active">补签</view> -->
						<!-- <view>未签到</view> -->
						<view class='bgBlue'></view>
					</view>
					<!-- 今日未签到-->
					<view @click="clickSignUp(item.date,1)" class="cell grayColor active" v-else-if="item.date==today&&cur_month==toMonth&&cur_year==toYear">
						<view>{{item.date}}</view>
						<!-- <view>签到</view> -->
						<view class='bgRed'></view>
					</view>
					<!-- 当前日期之后 -->
					<view class="cell grayColor" v-else>
						<view>{{item.date}}</view>
						<!-- <view>待签到</view> -->
						<view class='bgGray'></view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				days: [],
				SignUp: [],
				// 当前选的年
				cur_year: 0, 
				// 当前选的月
				cur_month: 0,
				// 本日
				today: parseInt(new Date().getDate()), 
				// 本月
				toMonth: parseInt(new Date().getMonth() + 1),
				// 本年
				toYear: parseInt(new Date().getFullYear()),
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
				weeks_en: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat']
			};
		},
		props: {
			sendYear: {
				type: Number,
				default: new Date().getFullYear()
			},
			sendMonth: {
				type: Number,
				default: new Date().getMonth() + 1
			},
			dataSource: {
				type: Array,
				default: () => {
					return []
				}
			},
			langType: {
				type: String,
				default: "ch"
			},
		},
		created() {
			this.cur_year = this.sendYear;
			this.cur_month = this.sendMonth;
			this.SignUp = this.dataSource;

			this.calculateEmptyGrids(this.cur_year, this.cur_month);
			this.calculateDays(this.cur_year, this.cur_month);
			this.onJudgeSign();
		},
		watch: {
			dataSource: 'onResChange',
		},
		methods: {
			/**
			 * @author smallfour
			 * @description 获取当月共多少天
			 */
			getThisMonthDays(year, month) {
				return new Date(year, month, 0).getDate()
			},
			/**
			 * @author smallfour
			 * @description 获取当月第一天星期几
			 */
			getFirstDayOfWeek(year, month) {
				return new Date(Date.UTC(year, month - 1, 1)).getDay();
			},
			/**
			 * @author smallfour
			 * @description 计算当月1号前空了几个格子，把它填充在days数组的前面
			 */
			calculateEmptyGrids(year, month) {
				//计算每个月时要清零
				this.days = [];
				const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						var obj = {
							date: null,
							isSign: false
						}
						this.days.push(obj);
					}
				}
			},

			/**
			 * @author smallfour
			 * @description 绘制当月天数占的格子，并把它放到days数组中
			 */
			calculateDays(year, month) {
				const thisMonthDays = this.getThisMonthDays(year, month);
				for (let i = 1; i <= thisMonthDays; i++) {
					var obj = {
						date: i,
						isSign: false
					}
					this.days.push(obj);
				}
			},

			onResChange(newD, oldD) {
				this.SignUp = newD;
				this.onJudgeSign();
			},
			
			/**
			 * @author smallfour
			 * @description 匹配判断当月与当月哪些日子签到打卡
			 */
			
			onJudgeSign() {
				var signs = this.SignUp;
				var daysArr = this.days;
				for (var i = 0; i < signs.length; i++) {
					var current = new Date(signs[i].replace(/-/g, "/"));
					var year = current.getFullYear();
					var month = current.getMonth() + 1;
					var day = current.getDate();
					day = parseInt(day);
					for (var j = 0; j < daysArr.length; j++) {
						//年月日相同则打卡成功   						
						if (year == this.cur_year && month == this.cur_month && daysArr[j].date == day) { //&& signs[i].isSign == "今日已打卡"
							// console.log(daysArr[j].date, day);
							daysArr[j].isSign = true;
						}
					}
				}
				this.days = daysArr;
			},

			// 切换控制年月，上一个月，下一个月
			handleCalendar(type) {
				const cur_year = parseInt(this.cur_year);
				const cur_month = parseInt(this.cur_month);
				var newMonth;
				var newYear = cur_year;
				if (type === 0) { //上个月
					newMonth = cur_month - 1;
					if (newMonth < 1) {
						newYear = cur_year - 1;
						newMonth = 12;
					}
				} else {
					newMonth = cur_month + 1;
					if (newMonth > 12) {
						newYear = cur_year + 1;
						newMonth = 1;
					}
				}
				this.calculateEmptyGrids(newYear, newMonth);
				this.calculateDays(newYear, newMonth);

				this.cur_year = newYear;
				this.cur_month = newMonth;

				this.SignUp = [];
				this.$emit('dateChange', this.cur_year+"-"+this.cur_month);
			},
			// 0补签，1当日签到
			clickSignUp(date, type) {
				let str = "签到";
				if (type == 0) {
					str = "补签";
					return;
				}
				this.$api.signIn({}).then(res => {
					if(res.code == 200){
						this.msg(str + '成功');
						this.SignUp.push(this.cur_year + "-" + this.cur_month + "-" + date);
						this.$forceUpdate();
						this.$emit('clickChange', this.cur_year + "-" + this.cur_month + "-" + date);
						this.onJudgeSign();
					}else{
						this.msg(str + '失败');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F4F4F4;
	}
	.all {
		margin: 0 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		.bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 30rpx 20rpx;
			padding: 40rpx 10rpx 0;
			.previous,.next{
				width:14%;
				text-align: center;
			}
			.barbtn {
				height: 30px;
				line-height: 30px;
				font-size: 12px;
			}
		}
		.week {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-left: 40rpx;
			padding-right: 40rpx;
			margin: 20rpx;
			border-radius: 10px;
			background-color: #fff;
		}
	}

	.myDateTable {
		// margin: 0 2.5vw 2.5vw 2.5vw;
		margin: 0 3vw 2.5vw 4vw;
		// padding: 2vw;
		border-radius: 10px;
		.dateCell {
			// width: 11vw;
			width: 10vw;
			padding: 1vw;
			display: inline-block;
			text-align: center;
			font-size: 16px;
			.cell {
				/* display: flex; */
				border-radius: 50%;
				height: 11vw;
				justify-content: center;
				align-items: center;
				view:nth-child(1){
					font-size: 36rpx;
				}
				view:nth-child(2){
					width:14rpx;
					height: 14rpx;
					border-radius: 50%;
					margin: auto;
					// font-size: 24rpx;
					// background: #EEEEEE;
					// padding: 4rpx 0;
					// border-radius: 8rpx;
				}
			}
			.active{
				view:nth-child(2){
					background: #FF0000!important;
					color: #FFFFFF!important;
				}
			}
		}
		
	}
	
	.grayColor {color: #b4b4b4;}
	.whiteColor {color: #fff;}
	.greenColor {color: #01b90b;}
	.blueColor {color: #607699;}
	.bgWhite {background-color: #fff;}
	.redColor {color: #ff0000;}
	.pinkColor{color: #fc6c53;}
	.bgPink{background-color: #fc6c53;}
	.bgGray{background-color: #b4b4b4;}
	.bgRed{background-color: #ff0000;}
	.bgGreen{background-color: #01b90b;}
	.bgBlue{background-color: #607699;}
	
</style>
